<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/todo%20List.css"/>
	</head>
	<body>
		<div class="big">
			<div class="big-up">
				<input type="text" placeholder="and new to-do..." id="addText">
			</div>
			<div class="big-down">
				<ul class="list"></ul>
				<p class="separator">~ done ~</p>
				<ul class="listed"></ul>
			</div>
		</div>
		<div class="delBtn"></div>
	
	<img src="images/checkbox.dark.big.png" >
	
	
	<script type="text/javascript">
		
		var addText = document.getElementById('addText')
		var list = document.querySelector('.list')
		var listed = document.querySelector('.listed')
		var separator = document.querySelector('.separator')
		
		addText.onkeyup = function(e){
			if(this.value != ""){
				if(e.keyCode == 13){
					var li = document.createElement('li')
					li.classList.add("item")
					li.innerHTML ='<img class="pic" src="images/checkbox.dark.big.png" >'
								+'<span class="list-span">'+this.value+'</span>'
								+'<input class="ipt" value="'+this.value+'">'
					list.appendChild(li);
					addText.value = "";
				}
			}else{
				alert('输入内容不能为空')
			}
		}
		
		list.onclick = function(e){
			
			if(e.target.classList.contains('pic')){
				this.removeChild(e.target.parentNode)
				
				// var item = e.target.parentNode;
				// var txt = item.innerText;
				var li = document.createElement('li')
				li.classList.add("items")
				li.innerHTML = '<img class="pic" src="images/checkbox.light.big.png" >'
							+'<span class="list-span">'+e.target.nextElementSibling.innerText+'</span>'
							+'<input class="ipt" value="'+this.value+'">'
				listed.appendChild(li);
				
			}
			
			if(document.querySelectorAll('.listed li').length > 0){
				
				separator.style.display = 'block';
			}
		}
		
		list.ondblclick = function(e){
			// console.log(e.target.nextElementSibling)
			// console.log(e.target.classList.contains('list-span'))
			if(e.target.classList.contains('list-span')){
				
				e.target.style.display = 'none';
				e.target.nextElementSibling.style.display = 'inline-block';
				
			}
			
		}
		
		list.onkeyup = function(e){
			// console.log(e.target)
			// console.log(e.target.previousSibling)
			if(e.keyCode == 13){
				e.target.style.display = "none";
				e.target.previousSibling.innerText = e.target.value;
				e.target.previousSibling.style.display = "inline-block";
			}
		}
		
		listed.onclick = function(e){
			if(e.target.classList.contains('pic')){
				this.removeChild(e.target.parentNode)
				
				// var items = e.target.parentNode;
				// var txt1 = items.innerText;
				var li = document.createElement('li')
				li.classList.add('item')
				li.innerHTML = '<img class="pic" src="images/checkbox.dark.big.png" >'
							+'<span>'+e.target.nextElementSibling.innerText+'</span>'
							+'<input class="ipt" value="'+this.value+'">'
				list.appendChild(li)
			}
			if(document.querySelectorAll('.listed li').length == 0){
				
				separator.style.display = 'none';
			}
		}
		
		var delBtn = document.querySelector('.delBtn')
		delBtn.onclick = function(){
			var li = document.querySelectorAll('.listed li')
			for(var i=0;i<li.length;i++){
				listed.removeChild(li[i])
			}
			if(document.querySelectorAll('.listed li').length == 0){
				
				separator.style.display = 'none';
			}
		}
		
		
	</script>
	</body>
</html>
